<template>
    <section>
        <el-col :span="24"
                class="toolbar"
                style="padding-bottom: 0px;">
            <el-form :inline="true"
                     :model="filters">
                <el-form-item>
                    <el-input placeholder="用户名"
                              v-model="filters.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="addHandle">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table :data="tableData"
                  style="width: 100%"
                  @selection-change="selsChange">
            <el-table-column type="selection"
                             width="55"></el-table-column>
            <el-table-column prop="id"
                             label="id"
                             width="70"
                             sortable></el-table-column>
            <el-table-column prop="name"
                             label="用户名"
                             width="120"
                             sortable></el-table-column>
            <el-table-column prop="email"
                             label="邮箱地址"
                             width="160"
                             sortable></el-table-column>
            <el-table-column prop="created_at"
                             label="创建时间"
                             sortable></el-table-column>
            <el-table-column prop="updated_at"
                             label="更新时间"
                             sortable></el-table-column>
            <el-table-column label="操作"
                             width="150">
                <template scope="scope">
                    <el-button size="small"
                               @click="editHandle(scope.$index,scope.row)">编辑</el-button>
                    <el-button type="danger"
                               size="small"
                               @click="delHandle(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24"
                class="toolbar"
                style="margin-top:20px;">
            <el-button type="danger"
                       @click='batchRemove'>批量删除</el-button>
            <el-pagination layout="prev, pager, next"
                           :page-size="pagesize"
                           :total="total"
                           :current-page="currentpage"
                           style="float:right;"
                           @current-change="pageHandle">
            </el-pagination>
        </el-col>
    
        <!--编辑界面-->
        <el-dialog title="用户信息"
                   v-model="dialogVisible">
            <el-form label-width="100px"
                     :model="formdata"
                     :rules="rules"
                     ref="formdata">
                <el-form-item label="用户名"
                              prop="name">
                    <el-input v-model="formdata.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址"
                              prop="email">
                    <el-input v-model="formdata.email"></el-input>
                </el-form-item>
                <el-form-item label="输入密码"
                              prop="password">
                    <el-input type='password'
                              v-model="formdata.password"></el-input>
                </el-form-item>
                <el-form-item label="密码确认"
                              prop="password2">
                    <el-input type='password'
                              v-model="formdata.password2"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary"
                           @click="submitForm('formdata')">确认</el-button>
                <el-button @click="resetForm('formdata')">重置</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.formdata.password2 !== '') {
                    this.$refs.formdata.validateField('password2');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formdata.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            //过滤
            filters: {
                name: ''
            },
            pagesize: 0,
            total: 0,
            currentpage: 0,
            dialogVisible: false,
            sels: [],
            tableData: [],
            formdata: {
                id: 0,
                name: '',
                email: '',
                password: '',
                password2: ''
            },
            submitMethod: 'get',
            submitUrl: 'api/user',
            //验证表单规则
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 5, message: '字符串长度必须大于等于5', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '邮箱格式错误！', trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                password2: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        api.getData('api/user', this);
    },
    methods: {
        pageHandle(val) {
            api.getDataByPage('api/user', val, this);
        },
        addHandle() {
            this.submitMethod = 'post';
            this.submitUrl = 'api/user';
            this.dialogVisible = true;
        },
        //编辑
        editHandle(index, row) {
            api.editData('api/user', row.id, this);
        },
        //删除
        delHandle(index, row) {
            api.delData('api/user', row.id, this);
        },
        //批量删除
        batchRemove() {
            api.batchRm('api/user', this);
        },
        selsChange(sels) {
            this.sels = sels;
        },
        submitForm(formName) {
            let me = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    window.axios({
                        url: me.submitUrl,
                        method: me.submitMethod,
                        data: me.formdata
                    }).then(function (res) {
                        me.dialogVisible = false;
                        me.$message({
                            showClose: true,
                            type: 'success',
                            message: res.data
                        });
                        me.resetForm('formdata');
                    });

                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}

</script>